import useAsyncFn from 'hooks/useAsyncFn'
import React, { memo, useEffect } from 'react'
import personalized from 'apis/personalized'
import styles from './style.module.css'
import LinkTitle from 'components/LinkTitle'
import ROUTES from 'constants/routes'
import { Spinner } from '@blueprintjs/core'
import MVItem from './MVItem'
const MV = memo(() => {
  const [state, getPersoniazlFn] = useAsyncFn(personalized.getPersonalizedMV)
  const { value = [], loading } = state
  useEffect(() => {
    getPersoniazlFn()
  }, [])
  return (
    <div className={styles.root}>
      <LinkTitle route={ROUTES.MV} title='推荐mv' />
      {loading ? (
        <Spinner />
      ) : (
        <div className={styles.content}>
          {value.map((v) => {
            return <MVItem {...v} key={v.name} />
          })}
        </div>
      )}
    </div>
  )
})
export default MV
